<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="text" class="text" />
  </body>
  <script>
    const doms = {
      text: document.querySelector('.text')
    };

    // 阶段 1：JavaScript 核心能力
    // 手写 new 操作符

    // 手写 深拷贝（处理循环引用、Symbol、Map/Set）

    // 手写 防抖（debounce）与 节流（throttle）

    function debounce(fn, delay = 1000) {
      let timer = null;
      return function (...args) {
        console.log('防抖this', this, args);
        const context = this;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn.call(context, ...args);
        }, delay);
      };
    }
    const obj = {
      keyup(e) {
        console.log('this', this);
      }
    };
    // const keyup = e => {
    //   console.log('keyup函数的参数', e);
    // };
    // doms.text.onkeyup = keyup;
    doms.text.onkeyup = debounce(obj.keyup, 1000);

    function throttle(fn, delay) {
      let timer = null;
      return function (...args) {
        const context = this;
        if (!timer) {
          fn.call(context, ...args);
          timer = setTimeout(() => {
            timer = null;
          }, delay);
        }
      };
    }

    // 手写 数组扁平化（支持层级控制）

    // 手写 函数柯里化（currying）
  </script>
</html>
